import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
    Card,
    Table,
    Modal,
    Form,
    Input,
    Button,
    Icon,
    InputNumber,
    Upload,
    Row,
    Col,
    Divider,
    Select,
    Spin,
    TreeSelect,
    message,
    Tooltip,
    Radio,
    Cascader
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './PlatformAssignment.less';
import DescriptionList from '../../components/DescriptionList';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option, OptGroup } = Select;
const TreeNode = TreeSelect.TreeNode;
const RadioGroup = Radio.Group;

@connect(({ }) => ({}))

@Form.create()
export default class PlatformAssignment extends PureComponent {
    state = {
        treeSelelctValue: -1,
        modalVisible: false,

    }

    setModalVisible(modalVisible) {
        this.setState({ modalVisible });
    }

    options = [
        {
            value: 'HB',
            label: '湖北',
            children: [
                {
                    value: 'WH',
                    label: '武汉',
                }
            ],
        },
        {
            value: 'SD',
            label: '山东',
            children: [
                {
                    value: 'HF',
                    label: '潍坊',
                }
            ],
        }
    ];

    renderSimpleForm() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label="机构名称">
                            {getFieldDecorator('orgName')(<Input placeholder="请输入" />)}
                        </FormItem>
                    </Col>
                    <Col md={12} sm={24}>
                        <FormItem label="所属区域">
                            <Cascader options={this.options} onChange={this.onChange} placeholder="请选择   " />
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={24} sm={24}>
                    <span className={styles.submitButtons}>
                        <Button type="primary" onClick={this.handleSearch}>查询</Button>
                        <Button style={{ marginLeft: 10 }} onClick={this.handleFormReset}>重置</Button>
                    </span>
                    </Col>
                </Row>
            </Form>
        );
    }
    columns = [
        {
            title: '客户编号',
            dataIndex: 'dealersNum',
            key: 'dealersNum',
        },
        {
            title: '客户姓名',
            dataIndex: 'dealersName',
            key: 'dealersName',
        },
        {
            title: '身份证号',
            dataIndex: 'head',
            key: 'head',
        },
        {
            title: '联系电话',
            dataIndex: 'contact',
            key: 'contact',
        },
        {
            title: '客户来源',
            dataIndex: 'source',
            key: 'source',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '分派机构',
            dataIndex: 'orgName',
            key: 'orgName',
        },
        {
            title: '操作',
            dataIndex: 'state',
            key: 'id',
            render: (text, record) => (
                <Fragment>
                    <a onClick={() => this.setModalVisible(true)}>分派</a>
                </Fragment>
            ),
        },
    ];

    columns_2 = [
        {
            title: '机构编号',
            dataIndex: 'orgNum',
            key: 'orgNum',
            align: 'center',
        },
        {
            title: '机构名称',
            dataIndex: 'orgName',
            key: 'orgName',
            align: 'center',
        },
        {
            title: '所属区域',
            dataIndex: 'province',
            key: 'province',
            align: 'center',
        },
        {
            title: '所在地',
            dataIndex: 'city',
            key: 'city',
            align: 'center',
        },
        {
            title: '操作',
            dataIndex: 'state',
            key: 'id',
            align: 'center',
            render: (text, record) => (
                <Fragment>
                    <a>选择</a>
                </Fragment>
            ),
        }
    ];

    data = [
        {
            key: '1',
            dealersNum: 'ICBC-001',
            dealersName: '张三',
            head: '320686198909059877',
            contact: '13900001111',
            source: '北汽4S店',
            createTime: '2018-6-26 11:00',
            orgName: '湖北武汉车买买汽车销售有限公司',
        },
        {
            key: '2',
            dealersNum: 'ICBC-002',
            dealersName: '李四',
            head: '320686198925863212',
            contact: '13812523569',
            source: '奥迪4S店',
            createTime: '2018-6-26 18:00',
            orgName: '湖北武汉鑫丰汽车销售有限公司',
        },
    ];


    data_2 = [
        {
            key: '1',
            orgNum: 'ICBC-001',
            orgName: '湖北武汉车买买汽车销售有限公司',
            province: '湖北省',
            city: '武汉市',
        },
        {
            key: '2',
            orgNum: 'ICBC-002',
            orgName: '湖北襄阳大丰起汽车销售有限公司',
            province: '湖北省',
            city: '襄阳市',
        },
        {
            key: '3',
            orgNum: 'ICBC-003',
            orgName: '湖北咸宁德星行有限公司',
            province: '湖北省',
            city: '咸宁市',
        },
    ];

    render() {
        return (
            <PageHeaderLayout title="客户分派">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <Table
                            columns={this.columns}
                            dataSource={this.data}
                            rowKey="id"
                        />
                    </div>
                </Card>
                <div>
                    <Modal
                        width="800px"
                        title="选择机构"
                        visible={this.state.modalVisible}
                        onOk={() => this.setModalVisible(false)}
                        onCancel={() => this.setModalVisible(false)}
                        footer={null}
                    >
                        <div className={styles.tableList}>
                            <div className={styles.tableListForm}>
                                {this.renderSimpleForm()}
                            </div>
                            <Table
                                dataSource={this.data_2}
                                columns={this.columns_2}
                                rowKey="id"
                            />
                        </div>
                    </Modal>
                </div>
            </PageHeaderLayout>
        );
    }
}